<template>
  <div class="agent" v-loading="loading">
    <div class="top">
      <div class="contition">
        <div class="wrap_time">
          <date-time type="other_half_hour" ref="child" :query="query" :isTimePeriod = "true"></date-time>
          <el-button type="primary" class="primary_btn fr find" v-on:click.stop="search">{{$t('public.search2')}}</el-button>
          <div class="clear"></div></div>
      </div>
      <affix :label="condition.agentName.split('(')[0] + $t('report.agentWorkLoRe')"></affix>
    </div>
    <div :id="id">
      <el-row class="ichars">
        <highcharts :options="highchartsOptions"></highcharts>
        <div class="notes">
          <span class="light">{{$t('report.hicharsNotes')}}: <span></span>{{$t('report.hicharsLight')}}</span>
          <span class="dark"><span></span>{{$t('report.hicharsDark')}}</span>
        </div>
      </el-row>
      <div class="tab">
        <div class="export">
          <el-button class="primary_btn fr" :style="isEcommerce === 'ecommerce' ? 'marginLeft: 10px' : ''" v-on:click.stop="isHeaderConfigShow=!isHeaderConfigShow" v-if="!configHeaderBool">{{$t('report.setHeaderConfig')}}</el-button>

          <!-- <el-button class="primary_btn fr report_excel_btn"
            v-if="$store.getters.exportFromEnd && isEcommerce !== 'ecommerce'"
            v-on:click.stop="exportExcel"
          >{{$t('report.exportXls')+($store.state.xlsxExportMode==='Both'?'(旧)':'')}}</el-button> -->

          <el-button class="primary_btn fr report_excel_btn"
            v-if="isEcommerce !== 'ecommerce'"
            v-on:click.stop="exportXlsx"
          >{{$t('report.exportXls')}}</el-button>

          <el-button class="primary_btn fr pdf" v-on:click.stop="exportPdf">{{$t('report.exportPDF')}}</el-button>
          <el-button class="primary_btn fr pdf" v-on:click.stop="flag">{{$t('report.returnPreviousPage')}}</el-button>
        </div>
        <div class="deploy">
            <el-collapse accordion>
              <el-collapse-item>
                <template slot="title">
                  <span class="fl explain">{{$t('report.toggleInstructe')}}</span>
                </template>
                <div>
                  1. {{$t('report.imQueueReplyNumAll')}} <br>
                  2. {{$t('report.imQueueAccessNum1')}} <br>
                  3. {{$t('report.responseTotalCount')}} <br>
                  4. {{$t('report.withdrawCount')}} <br>
                  5. {{$t('report.imSeatInviteNum')}} <br>
                  6. {{$t('report.imInviteAllNum')}} <br>
                  7. {{$t('report.inviteSessionRate')}} <br>
                  8. {{$t('report.imTurnToSession')}} <br>
                  9. {{$t('report.imturnOutSession')}} <br>
                  10. {{$t('report.finishConverNumber')}} <br>
                  11. {{$t('report.conSationFin')}}<br>
                  12. {{$t('report.averExchangeTime')}}<br>
                  13. {{$t('report.averResponseTime')}}<br>
                  14. {{$t('report.imFineSessionNum1')}}<br>
                  15. {{$t('report.imBadSessionNum1')}}<br>
                  16. {{$t('report.imKindSessionNum1')}}<br>
                  17. {{$t('report.imTurnCustomNum')}}<br>
                  18. {{$t('report.imEveryAskNum')}}<br>
                  19. {{$t('report.addVistorCount')}}<br>
                  20. {{$t('report.reponseIn40sCount')}}<br>
                  21. {{$t('report.reponseIn40sRate')}}<br>
                  22. {{$t('report.accessMessage')}}<br>
                  23. {{$t('report.finishMessage')}}<br>
                  24. {{$t('report.onlineStatusTotalLength')}}<br>
                  25. {{$t('report.busyStatusTotalLength')}}<br>
                  26. {{$t('report.customStatusTotalLength')}}<br>
                  27. {{$t('report.24hOneTimeResolutionRate')}}<br>
                  28. {{$t('report.48hOneTimeResolutionRate')}}<br>
                  29. {{ $t('report.sessionsQueueCount')}}<br/>
                  <p class="custom_alg">{{$t('report.ziDingYi')}}：</p>
                  <p v-for="(item, index) in formulas" :key="item.name">
                    {{index + 30}}.{{item.formulaInstr}}
                  </p>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        <report-table :data="tableData" :sum="totalData" :config="[...headOptions.Config, ...customConfig]"> </report-table>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :title="$t('report.reportExportHelp')" :visible.sync="dialogVisible" width="30%">
      <span>{{$t('report.reportExportTipTitle')}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button class="primary_btn" @click="dialogVisible = false">{{$t('public.cancel')}}</el-button>
        <el-button class="primary_btn" type="primary" @click="confirm">{{$t('public.confirm')}}</el-button>
      </span>
    </el-dialog>
    <header-option v-show="isHeaderConfigShow" :show="isHeaderConfigShow" :option="headOptionsShow" :type="id" v-on:close="close"></header-option>
  </div>
</template>
<script>
  import dateTime from '../base/datetime.vue'
  import {exportReportPdf, checkTime, searchTime, headOptionsToXlsxHeaders, colorConfigArr, mixData} from '@/utils/reportUtils.js'
  import {deepClone, getFormatTimeBySecond, optionTimeTypeCheck} from '@/utils/m7Utils.js'
  import reportTable from '../base/reportTable.vue'
  import headerOption from '../base/headerOption.vue'
  import affix from '../../../ui-modules/affix/Affix.vue'
  import * as XlsxUtil from 'src/utils/XlsxUtil.umd.js'

  export default {
    name: 'im_report_agent',
    data () {
      return {
        isEcommerce: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
        isHeaderConfigShow: false,  // 展示配置表头弹窗开关
        loading: false, // 查询时展示加载的开关
        query: { // 查询条件时间信息等
        },
        isShow: false, // 是否展示配置表头开关
        dialogVisible: false, // 导出pdf弹窗开关
        headOptions: { // 表头数据
          Config: []
        },
        headOptionsShow: {}, // 配置表头数据
        id: 'im_report_agent_detail', // 查询id
        serverData: [], // 表格数据
        serveNumData: [], // 表格数据
        sum: [], // 表格合计数据
        highchartsDefaultOptions: {
          chart: { type: '', animation: false },
          colors: colorConfigArr,
          xAxis: {
            categories: [],
            title: {
              enabled: true,
              text: '',
              style: { fontWeight: 'normal' }
            }
          },
          yAxis: {
            gridLineColor: '#e6e6e6',
            allowDecimals: false,
            title: { text: '' },
            showEmpty: false
          },
          title: { text: this.$t('report.agentWork') },
          legend: { align: 'center', verticalAlign: 'top', y: 30 },
          tooltip: {
            pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}{point.valueSuffix}</b><br/>',
            shared: true
          },
          credits: { enabled: false },
          series: []
        }
      }
    },
    props: {
      condition: {
        type: Object,
        default: function () {
          return {}
        }
      },
      formulas: {
        type: Array,
        default: function () {
          return []
        }
      },
      customConfig: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    components: {
      dateTime,
      reportTable,
      headerOption,
      affix
    },
    watch: {
    },
    computed: {
      // 是否展示配置表头
      configHeaderBool () {
        return this.$store.state.report.setConfigHeaderBool
      },
      tableData () {
        return this.getTableData(deepClone(this.serverData), this.headOptions)
      },
      totalData () {
        return this.getTotalData(deepClone(this.serverData), this.headOptions)
      },
      highchartsOptions () {
				let options = deepClone(this.highchartsDefaultOptions)
				let serverData = deepClone(this.serverData)
        if (!serverData || serverData.length === 0) {
          return options
        }

        let headerConfig = this.headOptions.Config || []
        let datas = serverData
        let categoriesArray = []
        let seriesArray = []

        headerConfig.forEach(item => {
          if (!item.show) {
            return
          }
          // fortyEightHoursRepeatRate(48h一次性解决率)   
          // twentyFourHoursRepeatRate(24h一次性解决率)  
          // 以上这两项，因为和图表中的Y轴的值无法对应，所以隐藏掉在图表中的渲染
          if (item.name === 'agentName' || item.name === 'fortyEightHoursRepeatRate' || item.name === 'twentyFourHoursRepeatRate') {
            return
          }
          let serie = { name: item.displayname, data: [], valueName: item.name }
          if (item.name === 'sessionAverageTimeLength' || item.name === 'averageFirstResponseTimeLength'  || item.name === 'closeSessionTotalTime' || item.name === 'openSessionTotalTime' || item.name === 'customSessionTotalTime' || item.name.indexOf('sessionTotalTime') > -1) {
            serie.tooltip = { valueSuffix: 's' }
          } else if (item.name === 'sessionCompleteRate' || item.name === 'sessionRollOutRate' || item.name === 'inviteSessionRate' || item.name === 'weixinInstantRespRate' || item.name === 'weiboInstantRespRate' || item.name === 'sdkInstantRespRate' || item.name === 'webchatInstantRespRate' || item.name === 'responeInstantTimeRate') {
            serie.tooltip = { valueSuffix: '%' }
          }
          seriesArray.push(serie)
        })

        for (let i = 0; i < datas.length; i++) {
          categoriesArray.push(datas[i]._id)
          for (let j = 0; j < seriesArray.length; j++) {
            seriesArray[j].data.push(datas[i][seriesArray[j].valueName])
          }
        }

        options.xAxis.categories = categoriesArray
        options.series = seriesArray
        return options
      }
    },
    methods: {
      // 截取时间渲染
      formatChartTime (reportTime) {
        if (this.query.timeType === 'year') {
          return reportTime.substring(4, 6)
        } else if (this.query.timeType === 'month') {
          return reportTime.substring(6, 8)
        } else if (this.query.timeType === 'day' || this.query.timeType === 'other_half_hour') {
          return reportTime.substring(0, 16)
        }
      },
      // 钻入进来执行的方法
      search1 () {
        let current = this.condition
        this.query = deepClone(current.childQuery)
        // this.$refs.child.query.initShow = current.childQuery.TimeType
        this.$refs.child.form = {
          timeType: current.childQuery.TimeType,
          yearReport: parseInt(current.childQuery.yearReport),
          monthReport: parseInt(current.childQuery.monthReport),
          dayReport: parseInt(current.childQuery.dayReport)
				}
        if (current.dateSource.timeType) {
          this.$refs.child.form.timeType = current.dateSource.timeType
          this.$refs.child.week = current.dateSource.week
        }
        this.$refs.child.formSource = current.dateSource
        this.$refs.child.timeCheck = current.childQuery.timePeriod || false
        this.$refs.child.timePeriodStart = current.childQuery.timePeriodStart || ''
        this.$refs.child.timePeriodEnd = current.childQuery.timePeriodEnd || ''
        if (current.childQuery.TimeType === 'other_half_hour') {
          if (current.childQuery.StartTime || current.childQuery.EndTime) {
            let StartTime = current.childQuery.StartTime.split(' ')[1] ? current.childQuery.StartTime.split(' ')[1] : ''
            let EndTime = current.childQuery.EndTime.split(' ')[1] ? current.childQuery.EndTime.split(' ')[1] : ''
            this.$refs.child.otherTimes = {
              beginTime: StartTime,
              endTime: EndTime,
              beginDate: current.childQuery.normalStartTime,
              endDate: current.childQuery.normalEndTime
            }
          } else {
            this.$refs.child.otherTimes = {
              beginTime: '',
              endTime: '',
              beginDate: '',
              endDate: ''
            }
          }
        }
        if (this.query.TimeType === 'other_half_hour') {
          let message = checkTime(this.query.StartTime, this.query.EndTime, false, false) // 校验类型与时间
          if (message !== true) {
            this.$message.error(this.$t(message))
            return
          }
        }
        if (this.$refs.child.form.timeType === 'week') {
          this.query.TimeType = 'other'
        }
        let data = {
          AgentID: this.query.AgentID,
          timeType: this.query.TimeType,
          yearReport: this.query.yearReport,
          monthReport: this.query.monthReport,
          dayReport: this.query.dayReport,
          StartTime: this.query.StartTime,
          EndTime: this.query.EndTime,
          timePeriod: this.query.timePeriod,
          timePeriodStart: this.query.timePeriodStart,
          timePeriodEnd: this.query.timePeriodEnd,
          reportType: 'im_report_agent_detail',
          account: this.$store.state.session.user.account
        }
        this.loading = true
        this.sendRequest(data, 123)
      },
      // 处理表格数据
      getTableData (serverData, headOptions) {
        if (!serverData || serverData.length === 0) {
          return []
        }
        let data = deepClone(serverData)
        data.forEach(item => {
          item.time = item._id

          headOptions.Config.forEach((option, index) => {
            if (option.timeType && option.timeType === 'hhmmss') {
              item[option.name] = getFormatTimeBySecond(item[option.name])
            } else if (option.timeType && option.timeType === 'second') {
              item[option.name] = Math.round(item[option.name]) + 's'
            } else if (option.name.indexOf('Rate') > -1 && option.displayname.indexOf('率') > -1) {
              item[option.name] = `${item[option.name]}%`
            }
          })
        })
        return data
      },
      // 合计方法
      getTotalData (serverData, headOptions) {
        if (!serverData || serverData.length === 0) {
          return [{agentName: this.$t('report.total')}]
        }

        let headerConfig = headOptions.Config || []
        let datas = serverData
        // 定义一些合计用的上表头没有的字段
        let total = {
          time: this.$t('report.total'),
          sessionTotalTimeLength: 0,
          firstResponseTotalTimeLength: 0,
          responseTotalCount: 0
        }

        for (let i = 0; i < headerConfig.length; i++) {
          for (let j = 0; j < datas.length; j++) {
            if (!isNaN(datas[j][headerConfig[i].name])) {
              if ((headerConfig[i].name in total) === false) {
                total[headerConfig[i].name] = 0
              }
              total[headerConfig[i].name] += datas[j][headerConfig[i].name]
            }

            if (headerConfig[i].name === 'sessionAverageTimeLength') {
              total.sessionTotalTimeLength += datas[j]['sessionTotalTimeLength']
            } else if (headerConfig[i].name === 'averageFirstResponseTimeLength') {
              total.firstResponseTotalTimeLength += datas[j]['firstResponseTotalTimeLength']
            }
          }
        }
        // 48小时重复咨询次数
        let fortyEightHoursRepeatCount = 0
        // 24小时重复咨询次数
        let twentyFourHoursRepeatCount = 0
        datas.forEach(item => {
          if (item.fortyEightHoursRepeatCount) {
            fortyEightHoursRepeatCount += item.fortyEightHoursRepeatCount
          }
          if (item.twentyFourHoursRepeatCount) {
            twentyFourHoursRepeatCount += item.twentyFourHoursRepeatCount
          }
        })
        // 平均会话时长
        total.sessionAverageTimeLength = total.sessionCompleteCount + total.sessionRollOutCount > 0 ? Math.round(total.sessionTotalTimeLength / (total.sessionCompleteCount + total.sessionRollOutCount)) : 0
        // 平均首次响应时长
        total.averageFirstResponseTimeLength = total.responseTotalCount > 0 ? Math.round(total.firstResponseTotalTimeLength / total.responseTotalCount) : 0
        // 会话完成率
        total.sessionCompleteRate = total.sessionAccessCount + total.sessionRollInCount > 0 ? Math.round(((total.sessionCompleteCount + total.sessionRollOutCount) / (total.sessionAccessCount + total.sessionRollInCount + (total.inviteSessionCount || 0) + (total.activeClaimRobotSessionCount || 0) + (total.initiatingSessionCount || 0))) * 100) : 0
        // 会话转出率
        total.sessionRollOutRate = total.sessionAccessCount > 0 ? Math.round((total.sessionRollOutCount / total.sessionAccessCount) * 100) : 0
        // 主动邀请成功率
        total.inviteSessionRate = total.agentInviteCount > 0 ? Math.round((total.inviteSessionCount / total.agentInviteCount) * 100) : 0
        total.inviteSessionRate = total.inviteSessionRate > 100 ? 100 : total.inviteSessionRate
        // 40s及时响应率
        total.responeInstantTimeRate = total.responseTotalCount > 0 ? Math.round((total.instantRespTimeCount / total.responseTotalCount) * 100) : 100
        if (total.sessionAccessCount + total.sessionRollInCount - total.sessionRollOutCount) {
          // 48h一次性解决率
          total.fortyEightHoursRepeatRate = Math.round(((total.sessionAccessCount + total.sessionRollInCount - total.sessionRollOutCount - fortyEightHoursRepeatCount) / (total.sessionAccessCount + total.sessionRollInCount - total.sessionRollOutCount)) * 100)
          // 24h一次性解决率
          total.twentyFourHoursRepeatRate = Math.round(((total.sessionAccessCount + total.sessionRollInCount - total.sessionRollOutCount - twentyFourHoursRepeatCount) / (total.sessionAccessCount + total.sessionRollInCount - total.sessionRollOutCount)) * 100)
        } else {
          total.fortyEightHoursRepeatRate = 0
          total.twentyFourHoursRepeatRate = 0
        }
        
        total = mixData([total], this.formulas)[0]
        headOptions.Config.forEach((option, index) => {
          if (option.timeType && option.timeType === 'hhmmss') {
            total[option.name] = getFormatTimeBySecond(total[option.name])
          } else if (option.timeType && option.timeType === 'second') {
            total[option.name] = Math.round(total[option.name]) + 's'
          } else if (option.name.indexOf('Rate') > -1 && option.displayname.indexOf('率') > -1) {
            total[option.name] = `${total[option.name]}%`
          }
        })
        return [total]
      },
      close (data) {
        if (data) {
          this.search()
        }
        this.isHeaderConfigShow = false
      },
      // 返回上页
      flag () {
        this.$emit('flag')
      },
      // 处理查询条件
      getSearchQueryData () {
        // 定义查询条件
        let data = {
          AgentID: this.condition.childQuery.AgentID,
          timeType: this.query.timeType,
          yearReport: this.query.yearReport + '',
          monthReport: this.query.monthReport,
          dayReport: this.query.dayReport,
          StartTime: this.query.StartTime,
          EndTime: this.query.EndTime,
          timePeriod: this.query.timePeriod,
          timePeriodStart: this.query.timePeriodStart,
          timePeriodEnd: this.query.timePeriodEnd,
          reportType: this.id,
          account: this.$store.state.session.user.account
        }
        if (data.timeType === 'other_half_hour') {
          let message = checkTime(data.StartTime, data.EndTime, false, false) // 校验类型与时间
          if (message !== true) {
            this.$message.error(this.$t(message))
            return
          }
        }
        if (this.$refs.child.form.timeType === 'week') {
          data.timeType = 'other'
        }
        return data
      },
      search () {
        var queryData = this.getSearchQueryData()

        if (!queryData) {
          return
        }
        this.loading = true
        this.sendRequest(queryData)
      },
      // 请求和处理返回结果的方法
      sendRequest (data, num) {
        this.$store.dispatch('queryImAgentDetail', data).then((res) => {
          if (num === 123) {
            // 复制搜索条件避免传值渲染得时候影响父组件得条件
            this.query = deepClone(this.condition.childQuery)
            this.query.timeType = this.query.TimeType
          }
          // 表头
          if (res.tableHeader) {
            let tableHeaderArr = res.tableHeader.Config
            tableHeaderArr.forEach(item => {
              if (item.name === 'instantRespTimeCount' || item.name === 'responeInstantTimeRate') {
                item.displayname = item.respTime + item.displayname
              }
            })
          }
		      this.headOptions = optionTimeTypeCheck(deepClone(res.tableHeader) || this.headOptions)
          if (res.tableHeader) {
            let tableDataHeader = res.tableHeader.Config.filter(item => {
              return !item.isCustomConfig
            })
            res.tableHeader.Config = tableDataHeader
            this.headOptionsShow = optionTimeTypeCheck(deepClone(res.tableHeader))
          } else {
            this.headOptionsShow = optionTimeTypeCheck(this.headOptionsShow)
          }
          this.serverData = deepClone(mixData(res.data, this.formulas)) || deepClone(this.serverData)
          this.loading = false
          //  图表标题 加入 定时段的 时间
          let highchartsTitle = ''
          if (data.timePeriod) {
            let timePeriodStartStr = data.timePeriodStart || '00:00'
            let timePeriodEndStr = data.timePeriodEnd || '23:59'
            highchartsTitle = '(' + timePeriodStartStr + '~' + timePeriodEndStr + ')'
          }
          this.highchartsDefaultOptions.title.text = this.$t('report.imReportAgent') + highchartsTitle
        })
      },
      // 导出表格数据执行的方法(前端)
      exportXlsx () {
        var data = this.getSearchQueryData()
        if (!data) {
          return
        }

        this.loading = true
        this.$store.dispatch('queryImAgentDetail', data).then((res) => {
          this.loading = false
          // 表头
          var ConfigsTemp = []
          var headOptions = optionTimeTypeCheck(deepClone(res.tableHeader) || [])
          headOptions.Config && headOptions.Config.forEach(config => {
            if (config.name === 'instantRespTimeCount') {
              config.displayname = config.respTime ? config.respTime + '及时响应数' : '40s及时响应数'
            } else if (config.name === 'responeInstantTimeRate') {
              config.displayname = config.respTime ? config.respTime + '及时响应率' : '40s及时响应率'
            }
            if (config.name !== 'everyCustomStatusTime') {
              ConfigsTemp.push(config)
            }
          })
          headOptions.Config = ConfigsTemp
          var serverData = mixData(deepClone(res.data), this.formulas) || []
          var tableData = this.getTableData(serverData, headOptions, true)
          var headers = headOptionsToXlsxHeaders([...headOptions.Config, ...this.customConfig])

          if (tableData && tableData.length) {
            var sum = this.getTotalData(serverData, headOptions)
            tableData = tableData.concat(sum)
          }

          var dh = XlsxUtil.getDownloadHelper(headers, tableData)
          var timeStamp = XlsxUtil.dateFormat(new Date(), 'yyyy-MM-dd hh-mm-ss')
          dh.download(this.$t('report.imReportAgent') + timeStamp)
        })
      },
      // 查询方法
      // search () {
      //   var data = this.getSearchQueryData()

      //   if (!data) {
      //     return
      //   }

      //   this.loading = true
      //   this.sendRequest(data)
      // },
      // 导出表格数据执行的方法(后端)
      exportExcel () {
        let myQuery = deepClone(this.query)
        if (myQuery.timeType === 'other_half_hour') {
          let message = checkTime(myQuery.StartTime, myQuery.EndTime, false, false) // 校验类型与时间
          if (message !== true) {
            this.$message.error(this.$t(message))
            return
          }
        }
        myQuery.TimeType = myQuery.timeType
        delete myQuery.timeType
        myQuery.accountId = this.$store.state.session.user.account
        myQuery.type = 'agentExport'
        myQuery.userType = this.$store.state.session.user.type
        myQuery.dataDB = this.$store.state.session.account.dataDB
        myQuery.user = this.$store.state.session.user._id
        myQuery.AgentID = this.condition.AgentID
        myQuery.reportType = 'call_report_agent_time'
        myQuery.pbx = this.$store.state.session.user.pbx
        myQuery.type = this.$store.state.session.user.type
        delete myQuery.selectedAgentList
        delete myQuery.includeSubordinate
        if (myQuery.reportType === 'call_report_agent') {
          myQuery.AgentID = ''
        }
        if (this.$refs.child.form.timeType === 'week') {
          myQuery.TimeType = 'other'
        }
        let data = {
          Method: 'exportAgent',
          Query: myQuery
        }
        if (data.TimeType === 'other_half_hour') {
          delete data.yearReport
          delete data.monthReport
          delete data.dayReport
        }
        this.$store.dispatch('exportCallAgentReport', data).then(() => {
        })
      },
      // 导出PDF
      exportPdf () {
        this.dialogVisible = true
      },
      // 确认导出pdf执行的方法
      confirm () {
        this.dialogVisible = false
        exportReportPdf({title: this.$t('report.singleCallReportAgent') + searchTime(this.query), id: this.id})
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .agent
    .formal
      margin-left 10px
    .table
      padding-bottom: 20px
    .accs
      margin 14px 0 0px 0px
      .access
        margin-right 10px
      .el-select
        width 600px
    .agent_search
      .wrap_conti
        margin 14px 0 0 0px
        .chan_ag
          float left
          margin-right 16px
        .el-radio
          margin-right 30px
        .dept
          .el-radio
            margin-right 42px
    .skill
      margin-top 14px
      .ski
        margin-right 26px
    .tip
      cursor pointer
      display inline-block
      height 16px
      width 16px
      border 1px solid $c-main
      text-align center
      line-height 15px
      border-radius 50%
      margin 0px 0 0 6px
      .iconfont
        border none
        font-size 10px
        color $c-main
    .agen
      margin 14px 0 0px 18px
      .el-select
        width 220px
    .search
      margin-bottom 34px
      .el-select
        width 400px
      .el-checkbox
        margin-left 16px
    .age
      display inline-block
      height 36px
      line-height 36px
      margin-right 16px
</style>
